<template>
	<view class="container">
		<view class="headWrap" v-if="shopInfo.out_trade_no">
			<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/-72x-1.png" mode=""></image>
			<view class="QRcode">
				<view class="head" :style="{ top: statusBarHeight + 'px' }">
					<u-icon  @click="goOrder()" name="arrow-left" color="#fff" size="36"></u-icon>
					<text>商品详情</text>
				</view>
				<view class="comtents">
					<view>订单编号：{{shopInfo.out_trade_no}}</view>
					<view class="code" v-if="shopInfo.address.code">核验码：{{shopInfo.address.code}}</view>
				</view>
			</view>
		</view>
		<view class="shopWrap scroll" v-if="shopInfo.id" :style="{ top:(statusBarHeight + 512) + 'rpx' }">
				<view class="title" v-if="shopInfo.address">{{shopInfo.address.address_type == 2 ? "自提商品" : "物流配送"}}</view>
				<view class="list" v-for="(ele,index) in shopInfo.goods" :key="index">
					<image :src="ele.goods_images[0]" mode=""></image>
					<view class="shopInfo">
						<view class="name">{{ele.goods_name}}</view>
						<view class="skr">{{ele.sku_text}}</view>
						<view class="bottom">
							<text>x {{ele.number}}</text>
							<text class="price">¥{{ele.orders_payable}}</text>
						</view>
					</view>
				</view>
				<view class="pickUp" v-if="shopInfo.address.address_type == 2">
					<text>选择自提门店</text>
					<text class="txt">{{shopInfo.store.title}}</text>
				</view>
				<view class="pickUp" v-if="shopInfo.address.address_type == 2">
					<text>选择自提时间</text>
					<text class="txt">{{$u.timeFormat(shopInfo.address.address_time, 'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				order_id:0,
				shopInfo:{}
			}
		},
		async onLoad({order_id}) {
			this.order_id = order_id
			this.details()
			//获取状态栏高度
			let _this = this;
			uni.getSystemInfo({
				success: function(res) {
					// 获取tab栏高度
					let query = uni.createSelectorQuery();
					_this.statusBarHeight = res.statusBarHeight;
				}
			});
		},
		methods: {
			goOrder(){
				this.utlis.backPage(1)
				// uni.reLaunch({
				// 	url:"orderList"
				// })
			},
			async details(){
				let {data,code} = await this.$u.api.getOrders({id:this.order_id});
				data.goods.forEach((ele)=>{
					ele.goods_images = ele.goods_images.split(",")
				})
				this.shopInfo = data
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	position: relative;
	.shopWrap{
		padding: 0 40rpx;
		position: absolute;
		.scroll{
			height: calc(100vh - 512rpx);
			overflow: hidden;
			overflow-y: auto;
		}
		.pickUp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333333;
			font-size: 26rpx;
			margin-bottom: 40rpx;
			.txt{
				font-size: 24rpx;
			}
		}
		.list{
			display: flex;
			margin-bottom: 62rpx;
			image{
				width: 157rpx;
				height: 157rpx;
				border-radius: 20rpx;
				margin-right: 28rpx;
			}
			.shopInfo{
				.name{
					color: #000000;
					font-size: 32rpx;
					line-height: 45rpx;
				}
				.skr{
					color: #999999;
					font-size: 24rpx;
					margin: 16rpx 0 28rpx 0;
				}
				.bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 486rpx;
					color: #333333;
					font-size: 28rpx;
					.price{
						color: #007664;
						font-size: 30rpx;
					}
				}
			}
		}
		.title{
			font-size: 38rpx;
			font-weight: 500;
			color: #333333;
			line-height: 53rpx;
			margin-bottom: 48rpx;
		}
	}
	.headWrap{
		width: 750rpx;
		height: 512rpx;
		position: fixed;
		margin-bottom: 65rpx;
		z-index: 9999;
		>image{
			width: 750rpx;
			height: 512rpx;
			position: absolute;
			top: 0;
		}
		.QRcode{
			width: 750rpx;
			height: 512rpx;
			position: absolute;
			top: 0;
			z-index: 1;
			.head{
				width: 100%;
				height: 88rpx;
				position: absolute;
				text-align: center;
				line-height: 88rpx;
				top: 0;
				z-index: 99;
				color: #FFFFFF;
				font-size: 34rpx;
				u-icon{
					position: absolute;
					left: 18rpx;
					top: 50%;
					transform: translateY(-50%);
					
				}
			}
			.comtents{
				width: 600rpx;
				// height: 432rpx;
				position: absolute;
				top: 260rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 9;
				font-size: 38rpx;
				font-weight: 500;
				color: #ffffff;
				view{
					margin-bottom: 30rpx;
				}
			}
			// .code{
			// 	width: 100%;
			// 	font-size: 38rpx;
			// 	font-weight: 500;
			// 	color: #ffffff;
			// 	line-height: 53rpx;
			// 	text-align: center;
			// 	position: absolute;
			// 	bottom: 53rpx;
			// 	z-index: 9;
				
			// }
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
